<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        2个指令：v-if和v-show
        1.v-if：
            1):后面跟的是逻辑表达式，也可以是直接写true或false
            2):可以与v-else-if、v-else一起使用，但是这三个要是一个整体，中间不能被分隔
            3):很彻底地去掉了元素
        2.v-show：
            1):后面跟的是逻辑表达式，也可以是直接写true或false
            2):去掉元素的本质是通过display:none
            3):不支持template，也不支持v-else

     -->
    <div id="root">
        <h2 v-show="isShow">欢迎{{ name }}</h2>
        <hr>
        <button @click="n++">增加n的值</button>
        <h2>当前n的值是{{ n }}</h2>
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <!-- v-else后面不需要写条件 -->
        <div v-else>Vue</div>
        <hr>
        <!-- <div v-if="n === 1">{{ choose[0] }}</div> -->
        <!-- 如果需要在满足条件的时候同时显示多条语句，则可以在外面包裹template标签，template标签
        在转化为真实DOM的时候会移除 -->
        <template v-if="n >= 5">
            <h2>测试1</h2>
            <h2>测试2</h2>
            <h2>测试3</h2>
        </template>

    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el: "#root",
            data: {
                name: "xiaoming",
                // isShow: true,  // true表示显示，false表示不显示
                // 也可以通过表达式的形式
                isShow: 1 === 1,
                n: 0,
                choose: ['A', 'B', 'C']
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>